<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
      <style>

      body{margin: 0;background-color: #fff}
      h1,h2,h3,h4,h5,h6{font-weight: normal;}
      #header { background: #fff; height:50px;background-color: #fc6d4d;position:fixed;top: 0}
      #back { float: left; padding:17px}
      #back img{ width: 16px; height: 16px}
      nav {
              float: left;
              display: -webkit-box;
              display: -webkit-flex;
              display: flex;
              -webkit-box-orient: horizontal;
              -webkit-flex-flow: row;
              flex-flow: row;
              position: fixed;
              width: 100%;
              height: 40px;
            background-color: #fff;z-index:99999


          }

          nav .menu {
              -webkit-box-flex: 1;
              -webkit-flex: 1;
              flex: 1;
              width: 100%;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #333;
              text-align: center;
              border:1px solid #F5F5F5;overflow: hidden;    border-right: none
          }

          nav .menu.selected {
              font-size: 14px;
              color: #000;
              font-weight: bolder;
          }
          .le{float: left;}
          .ri{float: right;}
          .clearfix{clear: both;}
            #search { float: right; padding:17px}
            #search img{ width: 16px; height: 16px}
              #cont_list{margin-top:80px;}
            #cont_list .title{ font-size: 14px; height: 52px; border-bottom: 1px solid #F5F5F5; background: #FFF}
            #cont_list .title  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
            #cont_list .title h3{ float: left; line-height: 52px; color: #333333;}
            #cont_list .title2{ font-size: 14px; height: 52px; border-bottom: 1px solid #F5F5F5; background: #FFF; margin-top: 20px;margin-bottom: -5px}
            #cont_list .title2  span{ display: block; float: left; width: 3px; height: 12px; background: #666666; line-height: 52px;margin-left: 15px; margin-right: 12px; margin-top: 20px}
            #cont_list .title2 h3{ float: left; line-height: 52px; color: #333333;}
            #cont_list   {width: 100%;box-sizing: border-box;;padding: 0 ;padding-top: 23px;}
            #cont_list  .col{padding: 0 15px;padding-top: 13px;width: 100%;box-sizing: border-box;position: relative;padding-bottom:15px;border-bottom: 5px solid #F5F5F5;}
            #cont_list   .col .img{float: left;width: 58px;height: 58px;overflow:hidden;margin-right: 13px;border-radius: 50%}
            #cont_list  .col .img img{width: 100%; }
            #cont_list  .col .te{padding-top: 9px;box-sizing: border-box;}
            #cont_list   .col .te h4{font-size: 13px;line-height: 13px;color: #333;margin-bottom: 14px;margin-right:8px;}
            #cont_list  .col .te h5{font-size: 12px;line-height: 13px;color: #999}
            #cont_list  .col .te img{width:50px;height:13px;}
            #cont_list  .col .tj{position: absolute;right:15px;top: 28px}
            #cont_list   .col .tj p{font-size: 12px;color: #999}
            #cont_list  .col .top{margin-bottom: 11px;}
            #cont_list   .col .bot button{margin-right: 5px;display: block;padding: 0 10px;text-align: center;line-height:21px;height:21px;box-sizing: border-box;font-size: 12px;color: #999;background-color: #F8F8FA;border-radius: 0}
          </style>
  </head>
  <body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left" style="font-size:14px;"></span>
        </a>
        <div class="aui-title" style="font-size:14px;">查看机手</div>

    </header>

    <nav id="nav" >
        <div class="menu" tapmode onclick="dq()" id="xzdq">地区</div>
        <div class="menu" tapmode onclick="sb()" id="xzsb">驾驶设备</div>
        <div class="menu" tapmode onclick="jy()" id="xzjy">经验要求</div>
        <div class="menu" tapmode onclick="jl()" id="xzjl">距离</div>
    </nav>

    <div id="cont_list">
         <div class="col" v-for="site in jishou"  @click="show_jishou(site.uid)">
              <div class="top">
                <div class="img le">
                  <img :src="site.img" :alt="site.id">
                </div>
                <div class="te le">
                  <div>
                    <!-- v-if='site.icon'  -->
                  <h4 class="le">{{site.title==""?"未命名":site.title}}</h4><img class="le" src="../../image/renzheng.png" v-if="site.ren">
                    <div class="clearfix"></div>
                  </div>
                  <h5>驾龄：{{site.jialing}}年&nbsp;&nbsp;&nbsp;&nbsp;{{site.type}}</h5>
                </div>
                <div class="tj ri">
                  <p>{{site.tijian}}人推荐</p>
                </div>
                <div class="clearfix"></div>
              </div>
              <div class="bot">
                <button class="le">服务雇主{{site.fuwu}}家</button>
                <button class="le">好评率{{site.haoping}}%</button>
                <div class="clearfix"></div>
              </div>
            </div>
    </div>




  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript">
      apiready = function(){


  keyback()
        var header = $api.byId('header');
      headerH =  $api.fixStatusBar(header);
headerH = $api.fixIos7Bar(header);

$api.css($api.byId('nav'), 'top:'+headerH+'px');
$api.css($api.byId('cont_list'), 'margin-top:'+(headerH+45)+'px');

    api.showProgress({
        style: 'default',
        animationType: 'fade',
        title: '努力加载中...',
        text: '先喝杯茶...',
        modal: false
    });


        api.setRefreshHeaderInfo({
            loadingImg: 'widget://image/refresh.png',
            bgColor: '#fff',
            textColor: '#333',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            ajax();

        });




             jishou_list = new Vue({
                       el: '#cont_list',
                         data: $tools.getdata()

                   });

ajax();
$tools.datarefresh(jishou_list);
             //上拉更多
             api.addEventListener({
                   name:'scrolltobottom',
                   extra:{
                       threshold:50            //设置距离底部多少距离时触发，默认值为0，数字类型
                   }
               },function(ret,err){
                  limt+=10;
                   ajax();
                   api.showProgress({
                       style: 'default',
                       animationType: 'fade',
                       title: '努力加载中...',
                       text: '先喝杯茶...',
                       modal: false
                   });
               });
        //console.log($api.byId('cont_list').innerHTML);
        //

    //  saixuan();
      };





      var headerH,list,jishou_list;
      var limt = 10;
      var diqu="";
      var shebei="";
      var juli="";
      var jingyan=0;


function dq(){
  api.actionSheet({
      buttons:  ['全济南',"历下区", "市中区", "天桥区", "历城区", "槐荫区", "长清区", "章丘区", "济阳区", "莱芜区", "钢城区", "高新区"]
  }, function(ret, err){
      if( ret ){
                if(ret.buttonIndex==1){
                    diqu = "";
                    $api.text($api.byId('xzdq'), '全济南');
                  }else if(ret.buttonIndex==2){
                    diqu ="历下区";
                    $api.text($api.byId('xzdq'), '历下区');
                  }else if(ret.buttonIndex==3){
                    diqu ="市中区";
                    $api.text($api.byId('xzdq'), '市中区');
                  }else if(ret.buttonIndex==4){
                    diqu ="天桥区";
                    $api.text($api.byId('xzdq'), '天桥区');
                  }else if(ret.buttonIndex==5){
                    diqu ="历城区";
                    $api.text($api.byId('xzdq'), '历城区');
                  }else if(ret.buttonIndex==6){
                    diqu ="槐荫区";
                    $api.text($api.byId('xzdq'), '槐荫区');
                  }else if(ret.buttonIndex==7){
                    diqu ="长清区";
                    $api.text($api.byId('xzdq'), '长清区');
                  }else if(ret.buttonIndex==8){
                    diqu ="章丘区";
                    $api.text($api.byId('xzdq'), '章丘区');
                  }else if(ret.buttonIndex==9){
                    diqu ="济阳区";
                    $api.text($api.byId('xzdq'), '济阳区');
                  }else if(ret.buttonIndex==10){
                    diqu ="莱芜区";
                    $api.text($api.byId('xzdq'), '莱芜区');
                  }else if(ret.buttonIndex==11){
                    diqu ="钢城区";
                    $api.text($api.byId('xzdq'), '钢城区');
                  }else if(ret.buttonIndex==12){
                    diqu ="高新区";
                    $api.text($api.byId('xzdq'), '高新区');
                  }
                   ajax();
      }else{
      }
  });
}
function closeWin(){

  api.setFrameGroupIndex({
name: 'group1',
index:0
});
api.sendEvent({
name: 'hsy',
extra: {
id:0
}
});




}

function sb(){
  api.actionSheet({
      buttons:  ['不限',"小挖(10吨以下)", "中挖(10~20吨)", "中大挖(20~30吨)", "大挖(30吨以上)"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  shebei=0
                  $api.text($api.byId('xzsb'), '不限');
                }else if(ret.buttonIndex==2){
                  shebei = "小挖(10吨以下)";
                  $api.text($api.byId('xzsb'), '小挖(10吨以下)');
                }else if(ret.buttonIndex==3){
                  shebei = "中挖(10~20吨)";
                  $api.text($api.byId('xzsb'), '中挖(10~20吨)');
                }else if(ret.buttonIndex==4){
                  shebei = "中大挖(20~30吨)";
                  $api.text($api.byId('xzsb'), '中大挖(20~30吨)');
                }else if(ret.buttonIndex==5){
                  shebei = "大挖(30吨以上)";
                  $api.text($api.byId('xzsb'), '大挖(30吨以上)');
                }
                 ajax();
      }else{
          // console.log( JSON.stringify( err ) );
      }
  });

}


function jy(){
  api.actionSheet({
      buttons: ['不限',"1年以上", "3年以上","5年以上"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  jingyan=0
                  $api.text($api.byId('xzjy'), '不限');
                }else if(ret.buttonIndex==2){
                  jingyan =1;
                  $api.text($api.byId('xzjy'), '1年以上');
                }else if(ret.buttonIndex==3){
                  jingyan = 3;
                  $api.text($api.byId('xzjy'), '3年以上');
                }else if(ret.buttonIndex==4){
                  jingyan =5;
                  $api.text($api.byId('xzjy'), '5年以上');
                }
                 ajax();
      }else{
        //   console.log( JSON.stringify( err ) );
      }
  });

}

function jl(){
  api.actionSheet({
      buttons: ['不限',"由远至近", "由近至远"]
  }, function(ret, err){
      if( ret ){
        if(ret.buttonIndex==1){
                  juli=""
                  $api.text($api.byId('xzjl'), '不限');
                }else if(ret.buttonIndex==2){
                  juli ="由远至近";
                    $api.text($api.byId('xzjl'), '由远至近');
                }else if(ret.buttonIndex==3){
                  juli = "由近至远";
                    $api.text($api.byId('xzjl'), '由近至远');
                }
                 ajax();
      }else{
          // console.log( JSON.stringify( err ) );
      }
  });

}



function opsearch() {
  api.openWin({
      name: 'search',
      url: 'widget://html/search/search.html',
      slidBackEnabled:true,
      pageParam: {
          name: 'test'
      }
  });

}




function show_jishou(id){
  var member = $api.getStorage("member");
  console.log(member)
  if(member==null){
  api.openWin({
      name: 'login',
      url: 'widget://html/person/login_win.html',
        slidBackEnabled: false,
      pageParam: {
          name: 'test'
      }
  });
}else{


api.openWin({
    name: 'show_jishou',
    url: 'widget://html/jishou/show_win.html',
    pageParam: {
        id:id
    }
});
}
}



function ajax(){
      api.ajax({
          url: $api.getStorage("backapi")+'/index.php?s=jishou&c=home&m=list_ajax&uid='+$api.getStorage("member"),
          method: 'post',
          data: {
              values: {
                  limt: limt,
                  shebei:shebei,
                  juli:juli,
                  jingyan:jingyan,
              },
          }
      },function(ret, err){
          if (ret) {
           console.log(JSON.stringify(ret));
            if(diqu==""){
              $tools.setData("jishou",ret.status);
          jishou_list.jishou=ret.status
            }else{
              diquasc(ret)
            }
              api.refreshHeaderLoadDone()
              api.hideProgress();
          } else {
            api.toast({
                msg: '获取数据失败',
                duration: 2000,
                location: 'bottom'
            });

            api.refreshHeaderLoadDone()
            api.hideProgress();
            //  console.log( JSON.stringify( err ) );
          }
      });
}

function diquasc(data){
  var arr = [];
    for (var i = 0; i < data.status.length; i++) {
          var ddd = data.status[i].dizhi
            if(ddd.indexOf(diqu) != -1){
                arr.push(data.status[i])
            }
    }

      jishou_list.jishou=arr
      $tools.setData("jishou",arr);
}





function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
function keyback() {
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.confirm({
                title: '提示',
                msg: '是否退出应用',
                buttons: ['确定', '取消']
            }, function(ret, err) {
                if (ret.buttonIndex == 1) {
                    api.closeWidget({
                        silent: true
                    });
                }
            });
        });
    }

function sao(){
  var FNScanner = api.require('FNScanner');
  FNScanner.open({
      autorotation: true
  }, function(ret, err) {
      if (ret.content) {
        api.openWin({
            name: 'show_jishou',
            url: 'widget://html/jishou/show_win.html',
            pageParam: {
                id:ret.content
            }
        });

          //console.log(JSON.stringify(ret));
      } else {
        //  console.log(JSON.stringify(err));
      }
  });
}


  </script>
  </html>
